<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
      body{
          background-color: #bbb9b9;
      }
    #footer_center h3{color: white}
    #footer_center p{margin: 0}
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="80px" style="background-color: white">
     <div style="width: 1200px;margin: 0 auto">
         <el-row gutter="20">
             <el-col span="6">
                 <img src="imgs/icon.png" width="200">
             </el-col>
             <el-col span="10">
                 <el-menu mode="horizontal" active-text-color="orange">
                     <el-menu-item index="1">首页</el-menu-item>
                     <el-menu-item index="2">食谱</el-menu-item>
                     <el-menu-item index="3">视频</el-menu-item>
                     <el-menu-item index="4">资讯</el-menu-item>
                 </el-menu>
             </el-col>
             <el-col span="6">
                 <el-input style="position: relative;top: 15px" placeholder="请输入搜索的关键字">
                     <el-button slot="append" icon="el-icon-search"></el-button>
                 </el-input>
             </el-col>
             <el-col span="2">
                 <el-popover
                         placement="top-start"
                         title="欢迎来到烘焙坊!"
                         width="200"
                         trigger="hover">
                     <!--设置初始显示的内容-->
                     <div slot="reference">
                         <i style="font-size: 30px;position: relative;top: 20px" class="el-icon-user"></i>
                     </div>
                     <!--设置弹出的内容-->
                     <el-button type="info">注册</el-button>
                     <el-button type="warning">登录</el-button>
                 </el-popover>
             </el-col>
         </el-row>
     </div>
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto">
        <el-row gutter="20">
          <el-col span="12">
            <el-card>
              <img src="imgs/reg.png" width="100%">
            </el-card>
          </el-col>
          <el-col span="12">
            <el-form style="margin-top: 50px" label-width="80px">
              <el-form-item>
                <h1 style="font-size: 30px">立即注册
                  <span style="float: right;font-size: 15px">
                    <a href="" style="color: #0aa1ed;text-decoration: none">已有账号?现在登录</a>
                  </span>
                </h1>
              </el-form-item>
              <el-form-item label="用户名"><el-input placeholder="请输入用户名"></el-input></el-form-item>
              <el-form-item label="密码"><el-input placeholder="请输入密码"></el-input></el-form-item>
              <el-form-item label="昵称"><el-input placeholder="请输入昵称"></el-input></el-form-item>
              <el-form-item><el-button type="primary">注册</el-button></el-form-item>
            </el-form>
          </el-col>
        </el-row>
    </el-main>
    <el-footer style="background-color: #2f3234;height: 280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto;text-align: center;color: #666">
          <el-row gutter="20">
            <el-col span="8">
              <img src="imgs/icon.png">
              <p>教程灵感就看烘焙坊</p>
              <p>烘焙行业网络社区平台</p>
              <p>全国百城上千个职位等你来</p>
            </el-col>
            <el-col id="footer_center" span="8">
              <el-row gutter="20">
                <el-col span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p><p>烘焙食谱</p>
                  <p>分类信息</p><p>求职招聘</p><p>社区交流</p>
                </el-col>
                <el-col span="8">
                  <h3>服务与支持</h3>
                  <p>练习我们</p><p>广告投放</p>
                  <p>用户协议</p><p>友情链接</p><p>在线反馈</p>
                  <p>我发投稿</p>
                </el-col>
                <el-col span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p><p>手机版</p><p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col span="8">
              <p style="font-size: 60px;margin: 0">
                <span style="color: orange">烘焙</span>坊
              </p>
              <p>烘焙行业网络社区平台</p>
            </el-col>
          </el-row>
        </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
    methods:{

    }
  })
</script>
</html>